<script setup>
import { ref, onMounted } from 'vue'
import { getPhyterm, getPhysget, postPhyquery } from '@/apis/apis.js'
const phytermData = ref([])
const physgetData = ref([])
const selectShow = ref(false)
const type = ref('全部')
const sales = ref('desc')
const price = ref('desc')
const handleSelect = async (index) => {
  if (index === 0) {
    selectShow.value = !selectShow.value
  }
  else if (index === 1) {
    sales.value = ((sales.value === '') || (sales.value === 'desc')) ? 'asc' : 'desc'
    const res = await postPhyquery({
      type: type.value,
      sales: sales.value,
      price: price.value
    })
    physgetData.value = res.data
  }
  else {
    price.value = ((price.value === '') || (price.value === 'desc')) ? 'asc' : 'desc'
    const res = await postPhyquery({
      type: type.value,
      sales: sales.value,
      price: price.value
    })
    physgetData.value = res.data
  }
}
const handlePhyquery = async (item, index) => {
  type.value = item
  const res = await postPhyquery({
    type: type.value,
    sales: sales.value,
    price: price.value
  })
  physgetData.value = res.data
}
const handleToDetailView = (item, index) => {
  uni.navigateTo({ url: `/pages/phy-exam/Details?id=${item._id}` })
}
onMounted(async () => {
  let res = await getPhyterm()
  phytermData.value = res.data
  res = await getPhysget()
  physgetData.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="view-sort">
      <view class="view-sort-all" v-for="(item, index) in phytermData" :key="index" @click="handleSelect(index)">
        <view class="view-sort-all-text">{{ item.query_val }}</view>
        <image class="view-sort-all-image" :src="index === 0 ? '/static/images/shaixuan-jiantou.png' : '/static/images/shaixuan.png'" mode="widthFix"></image>
      </view>
    </view>
    <view class="view-select" v-if="phytermData.length > 0 && selectShow" @click="selectShow = false">
      <view class="view-select-item" v-for="(item, index) in phytermData[0].filter_val" :key="index" @click="handlePhyquery(item, index)">{{ item }}</view>
    </view>
    <view class="view-items">
      <view class="view-item" v-for="(item, index) in physgetData" :key="index" @click="handleToDetailView(item, index)">
        <view class="view-item-header">{{ item.title }}</view>
        <view class="view-item-body">
          <view class="view-item-body-left-container">
            <image class="view-item-body-left" :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="view-item-body-right">
            <view class="view-item-body-right-title">{{ item.be_suit }}</view>
            <view class="view-item-body-right-content">{{ item.describe }}</view>
          </view>
        </view>
        <view class="view-item-footer">
          <view class="view-item-footer-number">已约 {{ item.sales }}</view>
          <view class="view-item-footer-price">￥ {{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .view-sort-all {
      display: flex;
      align-items: center;
      padding: 30rpx;
      .view-sort-all-text {
        margin-right: 10rpx;
        font-size: 32rpx;
      }
      .view-sort-all-image {
        width: 20rpx;
      }
    }
  }
  .view-select {
    position: absolute;
    top: 92rpx;
    left: 0;
    z-index: 999;
    width: 750rpx;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    .view-select-item {
      padding: 30rpx;
      background-color: #fff;
    }
  }
  .view-items {
    padding-top: 20rpx;
    .view-item {
      margin: 0 20rpx 20rpx;
      padding: 20rpx;
      background-color: #fff;
      .view-item-header {
        margin-bottom: 20rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
      .view-item-body {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        .view-item-body-left {
          margin-right: 20rpx;
          width: 250rpx;
          height: 250rpx;
        }
        .view-item-body-right {
          .view-item-body-right-title {
            margin-bottom: 30rpx;
            font-weight: bold;
          }
          .view-item-body-right-content {
            color: #ccc;
          }
        }
      }
      .view-item-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: red;
        font-size: 28rpx;
      }
    }
  }
}
</style>
